<template>
	<div id="cart">
		<div id="header">
				<i class="fa fa-angle-left" aria-hidden="true" @click="$router.go(-1)"></i>
			<div>我的购物车</div>
		</div>
		<div class="shopcard"  v-for="item in dataList">
			<div class="shopcard_1">
				<i class="fa fa-hand-scissors-o" aria-hidden="true"></i>
				<span>宅米店铺</span>
				<span>编辑</span>
			</div>
			<div class="shopcard_2">
				<img :src="item.order.pictureUrl"/>
				<div>
					<h3>{{item.data.itemName}}</h3>
					<p>
						<span>规格:</span>
						<span>{{item.data.name}}</span>
					</p>
					<p>
						<span>数量:</span>
						<span>{{item.num}}</span>
					</p>
					<p>
						<span>单价:</span>
						<span>{{item.data.price}}</span>
						
					</p>
				</div>
			</div>
			<div class="shopcard_3">
				<p>
					<span>小计:</span>
					<span>￥{{item.num*item.data.price}}</span>
					<span>立即购买</span>
				</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		computed:{
			dataList(){
				return this.$store.state.shop
			}
		}
	}
</script>

<style scoped>
	#cart{
		background-color:#f4f4f4;
		/*position: fixed;*/
		width:100%;
		height: 100%;
	}
	#header{
		height:1.189189rem;
		background:#fc2b64;
		display: flex;
		align-items:center;
		justify-content: center;
		position: fixed;
		top:0;
		left:0;
		right:0;
		z-index:999;
	}
	#header i{
		color:#fff;
		font-size:0.628378rem;
		position: absolute;
		left:0.27027rem;
		top:0.324324rem;
	}
	#header div{
		color:#fff;
		font-size:0.432432rem;
		font-weight:bold;
	}
	
	.shopcard{
		width:94.5%;
		height:6.945945rem;
		background:#fff;
		margin:0.43243rem auto;
		box-shadow: 5px 5px 30px rgba(0,0,0,.1);
		position: relative;
		top:1rem;
	}
	.shopcard_1{
		height:1.108108rem;
		line-height:1.108108rem;
		border-bottom:0.017027rem solid #ccc;
		display:flex;
		align-items:center;
		justify-content: space-between;
		padding:0 0.405405rem;
	}
	.shopcard_1 i{
		font-size:0.459459rem;
		color:#ccc;
	}
	.shopcard_1 span:nth-child(2){
		font-size:0.378378rem;
		color:#666;
		position: absolute;
		left:1.54054rem;
	}
	.shopcard_1 span:nth-child(3){
		color:#d83e64;
		font-size:0.378378rem;
	}
	.shopcard_2{
		display:flex;
		height:3.891891rem;
		border-bottom:0.017027rem solid #ccc;
	}
	.shopcard_2>img{
		width:2.135135rem;
		height:2.135135rem;
		position: relative;
		left:0.675675rem;
		padding-right: 0.98054rem;
		padding-top: 0.438054rem;
	}
	.shopcard_2 div{
		margin-top:0.4054rem;
	}
	.shopcard_2 div h3{
		font-weight:normal;
		font-size:0.374324rem;
		color:#444;
	}
	.shopcard_2 div p span{
		font-size:0.327rem;
		color:#bbb;
	}
	.shopcard_3 p{
		display: flex;
		justify-content: space-between;
		height:1.351351rem;
		line-height:1.351351rem;
		padding:0 0.81081rem;
	}
	.shopcard_3 p span:first-child{
		font-size:0.374324rem;
		color:#666;
	}
	.shopcard_3 p span:nth-child(2){
		color:#ff4a70;
		font-size:0.374324rem;
		position: absolute;
		left:2rem;
	}
	.shopcard_3 p span:nth-child(3){
		color:#ff4a70;
		font-size:0.374324rem;
	}
	
</style>